<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!--Chartist Chart CSS -->
        <link rel="stylesheet" href="assets/plugins/chartist/dist/chartist.min.css">

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">        
        <div class="row">
            <div class="col-12">
                <div class="card-box">

                    <div class="row">
                        <div class="col-sm-12 col-xs-12 col-md-6">
                            <h4 class="header-title m-t-0">先进的smil动画</h4>
                            <p class="text-muted font-13 m-b-30">
                                图表提供了一个简单的API的动画元素对图表的使用SMIL. 通常大部分动画可以用CSS3动画操作但是在有些情况下你不能用CSS处理，所以要用到动画的 SVG 性能.
                            </p>

                            <div class="p-20">
                                <div id="smil-animations" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xs-12 col-md-6">
                            <h4 class="header-title m-t-0">简单的线图</h4>
                            <p class="text-muted font-13 m-b-30">
                               一个简单的三行折线图的例子. 您可以实时编辑此示例.
                            </p>

                            <div class="p-20">
                                <div id="simple-line-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">线的散点图</h4>
                            <p class="text-muted font-13 m-b-30">
                                这个高级示例是使用折线图绘制散点图. 这个数据对象是用函数式随机机制创建的.
                            </p>

                            <div class="p-20">
                                <div id="scatter-diagram" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">线图工具</h4>
                            <p class="text-muted font-13 m-b-30">
                                一个简单的两行折线图的例子。你可以编辑这个例子.
                            </p>

                            <div class="p-20">
                                <div id="line-chart-tooltips" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">面积线图</h4>
                            <p class="text-muted font-13 m-b-30">
                                T本图中使用的showarea选择画线、点也是一个地区形状. 用下面的选项来指定修复更低的板块让区域变大.
                            </p>

                            <div class="p-20">
                                <div id="chart-with-area" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">带面积的双极线图</h4>
                            <p class="text-muted font-13 m-b-30">
                                您只能绘制折线图的区域形状. 区域形状总是围绕着他们的基础区域 (可以在选项里配置) 他也可以帮助你绘制漂亮的两极区域.
                            </p>

                            <div class="p-20">
                                <div id="bi-polar-line" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">SVG路径动画</h4>
                            <p class="text-muted font-13 m-b-30">
                                P使用SVG路径API使路径动画变得容易. API可以令你修改复杂的SVG路径并将它们转换成不同的动画.
                            </p>

                            <div class="p-20">
                                <div id="svg-animation" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">线内插值/平滑</h4>
                            <p class="text-muted font-13 m-b-30">
                                默认情况下，图表使用基数样条算法平滑线.
                                然而，就像在Chartist所有其他的东西，这可以轻松地定制!
                            </p>

                            <div class="p-20">
                                <div id="line-smoothing" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">不同系列的不同配置</h4>
                            <p class="text-muted font-13 m-b-30">
                                通过使用名称属性的序列对象符号命名您的系列,
                                可以启用系列特定设置的单独配置.
                            </p>

                            <div class="p-20">
                                <div id="different-series" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">SVG动画图</h4>
                            <p class="text-muted font-13 m-b-30">
                                这个高级示例使用折线图绘制散点图.
                                数据对象是用函数式随机机制创建的.
                            </p>

                            <div class="p-20">
                                <div id="svg-dot-animation" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">双极条形图</h4>
                            <p class="text-muted font-13 m-b-30">
                                具有低、高范围限制的双极条形图. 还有一个插值函数，用来跳过每一条奇怪的网格线/标签.
                            </p>

                            <div class="p-20">
                                <div id="bi-polar-bar" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">手机上的重叠栏</h4>
                            <p class="text-muted font-13 m-b-30">
                                这个例子利用插值和seriesbardistance标签允许使条彼此重叠的属性.
                            </p>

                            <div class="p-20">
                                <div id="overlapping-bars" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">多行标签</h4>
                            <p class="text-muted font-13 m-b-30">
                                图标列表将找出如果你的浏览器支持外物，将使用它们创建基于常规HTML文本元素的标签.
                            </p>

                            <div class="p-20">
                                <div id="multi-line-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">堆积条形图</h4>
                            <p class="text-muted font-13 m-b-30">
                                您还可以设置条形图，将每个系列的条形图堆叠起来。利用stackbars你的图表配置很方便.
                            </p>

                            <div class="p-20">
                                <div id="stacked-bar-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">水平条形图</h4>
                            <p class="text-muted font-13 m-b-30">
                                猜猜是什么！创建水平条形图是很简单的.
                                没有需要学习的新图表类型，只需传递额外的选项就足够了.
                            </p>

                            <div class="p-20">
                                <div id="horizontal-bar-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">极端敏感的配置</h4>
                            <p class="text-muted font-13 m-b-30">
                                由于图表的所有设置都可以用响应式配置定制。重写机制的图表，你可以创建一个图表，每个媒体条件下采用!
                            </p>

                            <div class="p-20">
                                <div id="extreme-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">分布式系列</h4>
                            <p class="text-muted font-13 m-b-30">
                                有时希望有一条沿x轴分布条形图.如果启用此选项, 你需要确保你通过一系列阵列图表包含序列值.
                            </p>

                            <div class="p-20">
                                <div id="distributed-series" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">标签的位置</h4>
                            <p class="text-muted font-13 m-b-30">
                                通过在轴配置内使用位置选项可以轻松更改在线标签和条形图的位置.
                            </p>

                            <div class="p-20">
                                <div id="label-placement-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">动画与圆形svg.animate</h4>
                            <p class="text-muted font-13 m-b-30">
                                虽然也可以用CSS来实现这个动画, 一些次要的东西, 这里有一个使用chartist.svg.animate和SMIL图做圆形动画的例子.
                            </p>

                            <div class="p-20">
                                <div id="animating-donut" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">简单饼状图</h4>
                            <p class="text-muted font-13 m-b-30">
                                一个非常简单的饼图与标签插值显示百分比代替实际数据序列值.
                            </p>

                            <div class="p-20">
                                <div id="simple-pie" class="ct-chart ct-golden-section simple-pie-chart-chartist"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">带有定制标签的饼图</h4>
                            <p class="text-muted font-13 m-b-30">
                                这个饼图配置了数据对象中指定的自定义标签，在桌面上我们使用labeloffset属性偏离中心的标签.
                            </p>

                            <div class="p-20">
                                <div id="pie-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">评估图</h4>
                            <p class="text-muted font-13 m-b-30">
                                这个饼图使用圆形, startAngle and total to draw a gauge chart.
                            </p>

                            <div class="p-20">
                                <div id="gauge-chart" class="ct-chart ct-golden-section"></div>
                            </div>
                        </div>

                    </div>
                    <!-- end row -->

                </div>
            </div><!-- end col-->

        </div>
        <!-- end row -->

    </div>
    <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!--Chartist Chart-->
        <script src="assets/plugins/chartist/dist/chartist.min.js"></script>
        <script src="assets/plugins/chartist/dist/chartist-plugin-tooltip.min.js"></script>
        <script src="assets/pages/jquery.chartist.init.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript">
            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
                );
        </script>

    </body>
</html>